import React,{Component, Fragment} from "react"
import {Row, Col, Divider} from "antd"
import "../style/index.scss"

class TechCom extends Component{
    constructor(props){
        super(props)
        this.state={
            title:"Development",
            divider:"专 注 · 极客 ·高效",
            dec:"奔赴在返璞归真的漫漫征途，追寻于原生态的书写指令，试图以最简单的方式诠释高效。",
            btnName:"More",
            decList:[
                {
                    tit:"定制化开发",
                    ico:"fa-object-group",
                    txt:"适应一个人的说话方式需要一段时间，我们的课程风格是统一的，您会很快适应。"
                },
                {
                    tit:"H5响应式布局",
                    ico:"fa-mobile-phone",
                    txt:"在视频里尽量不说没有必要的废话，直接告诉你想要的内容。节省时间，减轻痛苦。"
                },
                {
                    tit:"良好的SEO",
                    ico:"fa-retweet",
                    txt:"一个您从来都没听说过的东西，一两个小时以后，您就知道它是什么，能干什么。"
                }
            ]
        }
    }
    render(){
        return (
            <Fragment>
                <Row style={{zIndex:1}}>
                    <Col xs={{span:24}} md={{span:16, offset:4}}>
                        {/* <Row>&nbsp;</Row> */}
                        <Row>
                            <h1 className="tit_about">{this.state.title.toUpperCase()}</h1>
                        </Row>
                        <Row>
                            <Divider style={{fontSize: 30, fontWeight:"lighter"}}>{this.state.divider}</Divider>
                        </Row>
                        <Row>
                            <h4 className="tit_dec">{this.state.dec}</h4>
                        </Row>
                        <Row gutter={16}>
                            <Col md={{span:8}} lg={{span:8}}>
                                {this.state.decList.map((item, index)=>{
                                    return (
                                        <div className="agrs" key={index}>
                                            <h1>
                                                <i className={`fa ${item.ico}`} ></i>&nbsp;&nbsp;{item.tit}
                                            </h1>
                                            <p>{item.txt}</p>
                                            {/* <br/>    */}
                                        </div>
                                    )
                                })}
                            </Col>
                            <Col md={{span:16}} lg={{span:16}}>
                                <img className="imgSh" src={this.props.img} alt={"img"} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Fragment>
        )
    }
}

export default TechCom